<template>
	<view class="container">
		<u--form ref="queryForm" :model="query">
			<u-form-item label="" prop="containerCode" style="display: flex;">
				<span style="margin-right: 20rpx;">容器码</span>
				<u--input 
						placeholder="请输入/扫描" 
						v-model="query.containerCode" 
						suffixIcon="scan" 
						suffixIconStyle="font-size: 68rpx"
						style="flex: 1;">
				</u--input>
			</u-form-item>
			<u-form-item label="" prop="storage" style="display: flex;">
				<span style="margin-right: 20rpx;">储位码</span>
				<u--input 
						placeholder="请输入/扫描" 
						v-model="query.storage" 
						suffixIcon="scan" 
						suffixIconStyle="font-size: 68rpx"
						style="flex: 1;">
				</u--input>
			</u-form-item>
			<u-form-item label="" prop="storage" style="display: flex;">
				<span style="margin-right: 20rpx;">目的地</span>
				<u--input 
						placeholder="请输入目的地" 
						v-model="query.space" 
						style="flex: 1;">
				</u--input>
			</u-form-item>
		</u--form>
		<view style="display: flex;">
			<view style="flex: 1;text-align: start;">物料名称</view>
			<view style="flex: 1;text-align: start;">目的容器</view>
			<view style="flex: 1;text-align: start;">数量</view>
		</view>
		<view v-for="(item, index) in list" :key="index">
			<u-cell :border="index !== list.length - 1">
				<view
						slot="title"
						class="u-slot-title"
				>
					<view style="display: flex;align-items: center;">
						<view style="flex: 1;text-align: start;">物料1</view>
						<view style="flex: 1;text-align: start;">料箱</view>
						<u-input
							v-model="item.checkingQty" 
							type="number" 
							placeholder="请输入数量"
							style="flex: 1;text-align: start;"
						></u-input>
					</view>
				</view>
			</u-cell>
		</view>
		<view style="margin-top: 20rpx;">
			<u-button type="primary">确认</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				query: {
					containerCode: '',
					storage: '',
					space: ''
				},
				list: ['','','']
			};
		}
	}
</script>

<style lang="scss">

</style>
